<template>
  <div id="index" v-if="LoginUser">
    <el-aside>
      <menus></menus>
    </el-aside>


     <!-- 默认是h水平的方向  不加direction="vertical"则需加</el-footer>
        如果没有</el-footer>不会垂直显示则需加direction="vertical-->
    <el-container>
      <el-header> <top></top></el-header>

      <el-main>
          <transition name="el-fade-in">
              <router-view></router-view>
          </transition>
      </el-main>

      <el-footer><foot></foot></el-footer>
    </el-container>
  </div>
</template>


<script>
import menus from "./nav";
import top from "./head";
import foot from "./foot";
export default {
  name: "Index",
  components: {
    top,
    menus,
    foot,
  },
  data() {
    return {
      LoginUser: false,
    };
  },
  methods: {
    getuserinfo() {
      this.LoginUser = JSON.parse(sessionStorage.getItem("LoginUser"));
    },
  },
  // created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
// mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
// 其实两者比较好理解，通常created使用的次数多，
// 而mounted通常是在一些插件的使用或者组件的使用中进行操作，
// 比如插件chart.js的使用: var ctx = document.getElementById(ID);
// 通常会有这一步，而如果你写入组件中，
// 你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，
// 那么mounted就是不二之选。下面看一个例子
  created() {
    this.getuserinfo();
  },
};
</script>
<style scoped>
#index {
  height: 100%;
  width: 100%;
    /* background: #fff; */
  /* 在路由里面引用的一级路由 */
}
#index > .el-container.is-vertical {
   /* background: rgb(241, 6, 6); */

   /* Width auto其实是默认的值，一般我们无需设置此值，不设置即宽度默认为auto（自适应 自动） */
   /* Width:auto 这样宽度就是自动，随内容增加而增宽，随浏览器宽度而换行 */

   /* [1] width:100% 并不包含margin-left margin-right的属性值，
   直接取其父容器的宽度加上含margin-left /margin-right的值。
   如果设置了margin那新的width值是容器的宽度加上margin的值。（
   细心观察）就会发现加了 margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。
   (这条相对于父容器是body)。 父元素的content = 子元素的content*/
   
   /* auto 
   [2] width:auto包含margin-left/margin-right的属性值。其值包含margin-left /margin-right的值。
   width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）
   如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。
   减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加*/
  
   /* width: auto;  */

  background: url("../assets/img/back2.png") no-repeat;
  background-size: cover;
  height: 100%;
  /* overflow 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话 */
  /* 如果溢出框，则应该提供滚动机制 */
  overflow-y: auto;
  /* hidden裁剪内容 - 不提供滚动机制。 */
  overflow-x: hidden;
  z-index: 4;
}
.el-main {
  margin-top: 20px;
  z-index: 3;
  overflow-x: hidden;
  padding: 20px 0px !important;
  
 /* 整个盒子宽度包括，padding和变框宽度 */
  box-sizing: border-box;
  /* background:rgb(15, 224, 43); */
}
.el-aside {
  height: 100%;
  width: 250px !important;
  display: inline-block;
  float: left;
   background: rgb(4, 13, 28);
  z-index: 4;
}
.el-footer {
    /* position:fixed;作用，生成绝对定位的元素， 相对于浏览器窗口进行定位。可以通过设置
    "left", "top", "right" 以及 "bottom" 属性给目标元素定位。 
    https://blog.csdn.net/m0_37972548/article/details/78906468*/
    /* 2.当页面没用滚动条时，不设置 "left", "top", "right" 以及 "bottom" 属性时，页面排版后，
    目标div位于父级除去margin,padding后的最顶最左处。但此时的"left", "top", "right" 以及 "bottom" 
    属性仍然是根据浏览器窗口取值。 
    3.当页面有滚动条时，不设置"left", "top", "right" 以及 "bottom"
    属性时，页面排版后，目标元素“莫名其妙”消失。
    原因：元素的"left", "top", "right" 以及 "bottom" 
    属性仍然是根据浏览器窗口取值。
    运用position：fixed；一定要抱紧“ 相对于浏览器窗口"进行定位这个条件！*/
  position: fixed !important;
  bottom: 0 !important;
  right: 10px !important;
    /* 给一个元素中设置overflow:hidden，
  那么该元素的内容若超出了给定的宽度和高度属性，
  那么超出的部分将会被隐藏，不占位。 */
  overflow: hidden;
  height: auto !important;
    /* z-index 属性设置元素的堆叠顺序。
  拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
  在最上层 */
  z-index: 2;
  background: rgb(55, 8, 165);
}
/* .el-head{
    background: rgb(145, 131, 131);
} */
</style>